<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小米焦点图轮播</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none;}
.banner{width:992px; height:420px;  margin:100px auto; position:relative; overflow:hidden;}
.banner ul{ position:relative; z-index:1;}
.banner ul li{ position:absolute;}

.banner ol{ position:absolute; color:#fff; right:10px; bottom:10px; z-index:2;}
.banner ol li{ float:left;width:30px; height:20px; border:1px solid #CCCCCC; margin-left:8px; line-height:20px; text-align:center; color:#000;  cursor:pointer;}
.banner ol li.current{ background:#fcf}


.banner span{width:40px; height:70px; background:url(img/images/arr.png); position:absolute; left:0; top:50%; margin-top:-35px; cursor:pointer; z-index:99; display:none;}
.banner span.right{ right:0; left:auto; background-position:right top;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.banner ul li:first').css({'z-index':1})
	
	var myZindex = 1;
	
/*下角标*/
	$('.banner ol li').click(function(e) {
		
		if(!$(this).hasClass('current')){
			//角标的工作
			$(this).addClass('current').siblings().removeClass('current')
			//大图的工作
			
			var selfIndex = $(this).index()
			myZindex++;
			$('ul li').eq(selfIndex).css({'z-index':myZindex}).hide().fadeIn(400);
			
			num = selfIndex
		}
    });
	
	/*自动轮播*/
	var num = 0;
	var timer;
	function autoPlay(){
		
		num++;
		if(num>4){
			num=0	
		}
		myZindex++;
		$('.banner ul li').eq(num).css({'z-index':myZindex}).hide().fadeIn(400);
		$('.banner ol li').eq(num).addClass('current').siblings().removeClass('current')
		
	}
	timer = setInterval(autoPlay,2000)
	
	/*鼠标移上关闭定时器*/
	$('.banner').mouseenter(function(e) {
		$('.banner span').show()
        clearInterval(timer)
    }).mouseleave(function(e) {
       timer = setInterval(autoPlay,2000) 
	   $('.banner span').hide()
    });
	
	/*按钮*/
	$('span.right').click(function(e) {
        autoPlay();
		
		
    });
	$('span.left').click(function(e) {
        num--;
		if(num<0){
			num=4	
		}
		myZindex++;
		$('.banner ul li').eq(num).css({'z-index':myZindex}).hide().fadeIn(400);
		$('.banner ol li').eq(num).addClass('current').siblings().removeClass('current')
    });
	
})
</script>

</head>

<body>
<div class="banner">
	<ul>
		<li><img src="img/images/1.jpg" width="992" height="420" /></li>
        <li><img src="img/images/2.jpg" width="992" height="420" /></li>
        <li><img src="img/images/3.jpg" width="992" height="420" /></li>
        <li><img src="img/images/4.jpg" width="992" height="420" /></li>
        <li><img src="img/images/5.jpg" width="992" height="420" /></li>
	</ul>
    <span class="left"></span>
    <span class="right"></span>
    <ol>
    	<li class="current">1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    </ol>
</div>
</body>
</html>
